<!--
 * @Description: CFA题库Test-使用教程  --- Online_Tutorial
 * @Author: your name
 * @Date: 2023-12-27
 * @LastEditTime: 2023-12-27
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="online_Tutorial heart_w">
    <div class="test">
      <div class="header">
        <p>Page: {{ active }}</p>
      </div>
      <div class="centertitle">
        <p>Test: CFA Online Tutorial</p>
      </div>

      <div class="main">
        <div class="main_left">
          <div class="btns">
            <el-button
              size="mini"
              v-for="(item, index) in 14"
              :key="index"
              @click="btns_button(item)"
              :class="{
                active: item == active,
                answered:
                  (answer == 7 && item == 7) || (answer == 11 && item == 11)
              }"
            >
              {{ index + 1 }}
            </el-button>
          </div>
        </div>

        <div class="rightbor">
          <!-- 1.pages -->
          <div class="main_right" v-if="active == 1">
            <h5>Tutorial Introduction</h5>
            <p>
              The following screens provide a tutorial of the exam software.
              This will help you become familiar with the software features and
              is not intended to be a mock exam. This same tutorial will be
              available to you on exam day. Before attempting any exam
              questions, take a few minutes to review the tutorial.
            </p>
            <p>
              After completing and reviewing the sample exam questions, click
              the "Finish Section" button in the top-right corner of the screen.
            </p>
            <p>
              Once clicked, a pop-up window will appear confirming that you want
              to finish the section. Click "Yes" to submit your answers or "No"
              to return to the test.
            </p>
            <p>
              Please note that once you finish the section you may not return to
              the sample exam questions. Any questions that are unanswered or
              incorrect will not count against your final score.
            </p>
            <div class="tbody_t">
              <div>
                <p>
                  To change the color scheme at any time, click on the "Gear"
                  icon in the bottom-left corner of the screen.
                </p>
                <img src="@/assets/images/setting.jpg" alt="设置" />
              </div>
              <div>
                <p>
                  To view this information again at any time, click on the
                  "Information" icon at the bottom of the screen
                </p>
                <img src="@/assets/images/query.jpg" alt="资讯" />
              </div>
              <h5>To begin the tutorial, click "Next" to continue</h5>
            </div>
          </div>

          <!-- 2.pages -->
          <div class="main_right set_02" v-if="active == 2">
            <h5>Welcome to the Tutorial</h5>
            <p>
              This tutorial provides a series of screens that orient you to the
              computer testing environment. You will be instructed on how to use
              the mouse and the different parts of the screen.
            </p>
            <p>
              Notice the timer at the top of the screen. A similar display will
              appear during the actual exam. To the left of the screen is a
              numbered list that shows you where you are in the series of
              examination questions (or in this case, screens of the tutorial).
              Other screen features are described later in the tutorial.
            </p>
            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 3.pages -->
          <div class="main_right set_02" v-if="active == 3">
            <h5>Using the Mouse</h5>
            <p>
              The mouse pointer moves when you move the mouse around on a
              surface. Although it can assume different shapes, the arrow shown
              above is most common. To point with the mouse, move the pointer
              until it rests on the desired object. To click on an object, point
              to it and then quickly press and release the left mouse button.
            </p>
            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 4.pages -->
          <div class="main_right set_02" v-if="active == 4">
            <h5>Navigating Through the Exam</h5>
            <p>
              Click the <span>"Next"</span> button displayed at the bottom of
              the screen to move to the next screen or question. Click the
              <span>"Back"</span>button to move to the previous screen or
              question.
            </p>
            <p>
              In addition to the navigation buttons, you can use the numbered
              buttons displayed on the left side of the screen. Depending on the
              number of questions in the section, you may need to click on the
              down arrow to navigate to additional questions.
            </p>
            <p>
              <img src="@/assets/images/guide.jpg" alt="" />
            </p>
            <p>
              The numbered buttons change appearance to indicate different
              question states: Current, Attempted, Unattempted, and Flagged.
            </p>
            <ul>
              <li>
                The current question will be indicated by an arrow-shaped
                numbered button.
              </li>
              <li>
                For all attempted questions, the numbered button will appear
                darker in color.
              </li>
              <li>
                For all unattempted questions, the numbered button will remain
                the original color.
              </li>
              <li>
                Flagged questions will show a flag icon on the numbered button.
              </li>
            </ul>
            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 5.pages -->
          <div class="main_right set_02" v-if="active == 5">
            <h5>Time Remaining</h5>
            <p>
              The amount of time remaining is displayed at the top of the
              screen.
            </p>
            <p>
              <img src="@/assets/images/Time.jpg" alt="" />
            </p>
            <p>
              Each section of this examination is allocated a specific amount of
              time, including the Tutorial and Survey. There is also an overall
              amount of time provided for your full exam appointment. Clicking
              on the clock will switch between the amount of time remaining in
              the current section of the exam and the amount of overall time
              remaining for the full exam appointment.
            </p>
            <p>
              The most important time display for you as a test taker is the
              "Section Time Remaining."
            </p>
            <p>
              Note that, where applicable, an alert box will appear below the
              exam clock to signal when 30 minutes, 15 minutes, and 5 minutes
              remain in the current section.
            </p>
            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 6. pages -->
          <div class="main_right set_02" v-if="active == 6">
            <h5>Time Remaining</h5>
            <p>
              <img src="@/assets/images/flag.jpg" alt="" />
            </p>
            <p>
              You can flag a question as a reminder to go back and check your
              answer or attempt it later. To flag a question, click the "Flag"
              button displayed at the bottom of the exam screen.
            </p>
            <p>
              Any questions that are flagged for review will show a flag icon on
              the numbered button, as shown below.
            </p>
            <p>
              <img src="@/assets/images/guidepost.jpg" alt="" />
            </p>
            <p>Click the "Flag" button again to remove the flag.</p>
            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 7. page -->
          <div class="main_right Questions" v-if="active == 7">
            <div class="top_cont">
              <h5>Answering Multiple-Choice Questions</h5>
              <p>
                This examination uses multiple-choice questions. This type of
                question has one correct answer.
              </p>
              <p>
                To complete each multiple-choice question, click on the option
                that you believe to be the single best answer. Once selected,
                the option will appear darker in color. To change your response,
                click on a different option.
              </p>
              <p>
                Practice answering the multiple-choice question below. Once you
                have finished practicing, click the "Next" button to continue.
              </p>
              <p>Tallinn is the capital of which country?</p>
            </div>
            <div>
              <div
                class="example"
                v-for="(item, index) in data_set"
                :key="item.cid"
              >
                <span>
                  {{ set_options[index] }}
                </span>
                <div
                  :class="{ out: true, exa_act: set_val == item.option }"
                  @click="select_topic(item, index)"
                >
                  <div>{{ item.option }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 8. pages -->
          <div class="main_right Essay" v-if="active == 8">
            <div class="top_cont">
              <h5>Answering Essay Questions</h5>
              <p>
                This examination uses essay questions. This type of question
                requires you to write a response related to the scenario passage
                presented.
              </p>
              <p>
                To complete each essay question, use the keyboard to enter your
                response into the freeform text box provided below the question.
                You may change the font size, apply formatting, modify
                alignment, and add special characters and math equations to your
                response.
              </p>
              <p>
                Practice answering the essay question below. Once you have
                finished practicing, click the "Next" button to continue.
              </p>
              <p>
                <span style="font-weight: bold">Discuss</span> the differences
                between straight line and accelerated depreciation methods.
              </p>
            </div>
            <div class="editor_box">
              <quill-editor
                v-model="content"
                :options="editorOptions"
                class="editor"
                placeholder="请输入..."
              ></quill-editor>
            </div>
          </div>

          <!-- 9. -->
          <div class="main_right Remaining" v-if="active == 9">
            <h5>Time Remaining</h5>
            <p>
              Some items in this exam includes a scenario passage that will
              present on the left side of the screen. Each scenario passage will
              be associated to between 4 and 6 questions. Multiple Choice
              questions related to the Scenario
            </p>
            <p>
              Passage will be presented on the right, followed by the possible
              answer selections. Essay questions related to the Scenario Passage
              will be presented on the right, followed by a freeform text box.
            </p>
            <p>
              To answer these questions in your exam, use the mouse to select an
              answer on the right side of the screen.
            </p>
            <p>
              Please note: If the Scenario Passage opens over top of the
              question during this tutorial, try adjusting the zoom level of
              your browser. You may be required to make this adjustment in order
              for the Scenario Passages to present on the left side of your
              screen. During the real examination, this will happen
              automatically at the test center.
            </p>

            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 10. -->
          <div class="main_right" v-if="active == 10">
            <h5>Highlighting Text</h5>
            <p>
              During the examination, you will be able to highlight question
              text that you feel is important to refer back to as you progress
              through the exam. The highlight will remain present as you
              navigate through the exam, unless you select to remove it.
            </p>
            <p>
              To highlight text, click and drag the mouse cursor over the
              desired text. Click the "Highlight" button, as shown in the image
              below, that appears after releasing the mouse button. To remove
              the highlight, click on any area of the highlighted text.
            </p>
            <p>
              <img src="@/assets/images/characteri.jpg" alt="" />
            </p>
            <p>
              Please note the highlight feature cannot be applied to text within
              the answer options.
            </p>
            <h5 style="font-size: 16px; padding: 50px 0px">
              Click the "Next" button to continue.
            </h5>
          </div>

          <!-- 11. -->
          <div class="main_right Questions" v-if="active == 11">
            <div class="top_cont">
              <h5>Striking Out Options</h5>
              <p>
                During the examination, a Strikeout feature is available to help
                you visually eliminate possible options from consideration. A
                struck out option will remain present as you progress through
                the exam, unless you select to remove it.
              </p>
              <p>
                Right-click on an option to strike it out. Right-click again to
                remove the strikeout. Left-click on a struck out option to
                select it as your response. You may strike out as many or as few
                items as you like.
              </p>
              <p>
                Practice using the Strikeout feature below. Once you have
                finished practicing, click the "Next" button to continue.
              </p>
              <p>What bird has the largest wingspan of any existing species?</p>
            </div>
            <div>
              <div
                class="example"
                v-for="(item, index) in list_t"
                :key="item.cid"
              >
                <span>
                  {{ set_options[index] }}
                </span>
                <div
                  :class="{ out: true, exa_act: set_val == item.option }"
                  @click="select_topic(item, index)"
                >
                  <div>{{ item.option }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 12. -->
          <div class="main_right set_02" v-if="active == 12">
            <h5>Section Review</h5>
            <p>
              During the examination, you can review the status of all questions
              in a current exam section using the grid icon located in the
              bottom left corner of the exam screen:
            </p>
            <p>
              <img src="@/assets/images/Section .jpg" alt="" />
            </p>
            <p>
              To navigate directly to a question, click the corresponding
              numbered icon. You may also filter your view by unattempted,
              attempted, and flagged questions. The Section Review can be locked
              in place using the padlock icon and closed using the "X" icon.
            </p>
            <p>
              <img
                src="https://www.rongyuejiaoyu.com/static/static/img/prebig.dc725c2.jpg"
                alt=""
              />
            </p>
            <h5 style="padding: 50px 0px">
              Click the "Next" button to continue.
            </h5>
          </div>

          <!-- 13. -->
          <div class="main_right set_02" v-if="active == 13">
            <h5>Ending Exam Sections</h5>
            <p>
              After completing and reviewing all of the questions within the
              section, you can end the section by clicking the
              <span style="font-weight: bold">"Finish Test"</span> button in the
              top-right corner of the screen. Once clicked, a pop-up window will
              appear confirming you want to finish the section. Select "Yes, I
              would like to finish this test" to submit your answers.
            </p>
            <p>
              Please note that once you leave a section, you may not return. Any
              questions that are unanswered or incorrect will not count against
              your final score.
            </p>
            <h5>Click the "Next" button to continue.</h5>
          </div>

          <!-- 14. -->
          <div class="main_right set_02" v-if="active == 14">
            <h5>Tutorial Conclusion</h5>
            <p>
              This concludes the tutorial. You can review the tutorial by
              clicking on the
              <span style="font-weight: bold">"Back"</span> button to back up
              one screen at a time, or by using the numbered buttons displayed
              on the left side of the screen. You may view the tutorial at any
              point during the examination by clicking on the question mark
              icon. This icon can be found in the bottom left of the screen once
              you have begun testing.
            </p>
            <p>Good luck with the examination.</p>
            <h5>
              Click the "Start the Test" button to exit the tutorial and begin
              the examination.
            </h5>
          </div>
        </div>
      </div>

      <div class="footer">
        <el-button
          type="success"
          size="medium"
          icon="el-icon-arrow-left"
          @click="Back"
        >
          Back
        </el-button>
        <el-button type="success" size="medium" @click="Next">
          Next
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
        <el-button type="success" size="medium" @click="StartTest">
          Start Test
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
        <!-- <router-link to="questionbank"> </router-link> -->
        <el-button type="success" size="medium" @click="BackList">
          BackList
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'onlineTutorial',
  data() {
    return {
      active: 1,
      set_val: '',
      answer: {},
      content: '',
      set_options: ['A', 'B', 'C', 'D'],
      data_set: [
        {
          cid: 101,
          option: 'Estonia'
        },
        {
          cid: 102,
          option: 'Ukraine'
        },
        {
          cid: 103,
          option: 'Belgium'
        }
      ],
      list_t: [
        {
          cid: 104,
          option: 'Golden eagle'
        },
        {
          cid: 105,
          option: 'Wandering albatross'
        },
        {
          cid: 106,
          option: 'California condor'
        }
      ],
      editorOptions: {
        placeholder: '请输入...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link'],
            [{ size: ['small', false, 'large', 'huge'] }]
          ]
        }
      }
    }
  },
  created() {},
  mounted() {
    let divElement = document.querySelector('body > div')
    divElement.style.height = '100%'
  },
  methods: {
    btns_button(it) {
      console.log(it)
      this.active = it
      this.answer = ''
    },
    select_topic(it, index) {
      this.set_val = it.option
      if (this.active == 7) {
        this.answer = 7
      } else {
        this.answer = 11
      }
    },
    Back() {
      if (this.active > 1) {
        this.active--
      } else {
        return
      }
    },
    Next() {
      if (this.active < 14) {
        this.active++
      } else {
        return
      }
    },
    StartTest() {
      // path: '/exam_practice/CFA'
      this.$router.push({ name: 'CFApractice' })
    },
    BackList() {
      this.$router.push({ name: 'questionbank' })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/Tutorial.scss';
</style>
